class Page {
    constructor(el,options = {}) {
        this.el = document.querySelector(el)
        this.options = options
        this.init()
    }
    init () {
        // 1 给盒子绑定事件
        this.bindEvent()
        // 2 给div加样式
        this.parentTag()
        // 3 创建分页标签：首页 上一页 下一页 最后一页；分页页码：1，2，3……
        this.createTag()
    }

    // 给盒子绑定点击事件
    bindEvent () {
        this.el.onclick = (evt) => {
            let e = evt || window.event
            let target = e.target || e.srcElement
            // 这个P一定要大写
            if (target.nodeName === 'P') {
                switch (target.innerText) {
                    case this.options.pageTag.first:
                        this.options.pageInfo.pageNum = 1
                        this.createTag()
                        break;
                    case this.options.pageTag.prev:
                        if (this.options.pageInfo.pageNum == 1) return
                        this.options.pageInfo.pageNum--
                        this.createTag()
                        break;
                    case this.options.pageTag.next:
                        if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
                        this.options.pageInfo.pageNum++
                        this.createTag()
                        break;
                    case this.options.pageTag.last:
                        this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                        this.createTag()
                        break;
                    default:
                        if (parseInt(target.innerHTML) > 0) {
                            this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                        }
                        this.createTag()
                        break;
                }
            }
        }
    }

    // 给最大的div加样式
    parentTag () {
        this.el.style.display = 'flex'
        this.el.style.justifyContent = 'center'
        this.el.style.alignItems = 'center'
    }

    // 2 创建分页标签：首页 上一页 下一页 最后一页；分页页码：1，2，3……
    createTag () {
        this.el.innerHTML = ''
        for (let key in this.options.pageTag) {
            // 调用创建标签方法 创建p标签
            this.createP('p',this.options.pageTag[key],this.el)
        }
        // 创建分页页码
        this.createNum()
    }

    // 创建分页页码 1,2,3,4,5
    createNum () {
        let numObj = this.el.querySelector('p:nth-of-type(3)')
        numObj.style.border = 'none'
        numObj.style.margin = '0px'
        // for (let i = 1;i < 6;i++) {
        //     // 调用创建标签方法 创建p标签
        //     this.createP('p',i,numObj)
        // }
        // 1 2 3 4 5 ··· 99 100   pageNum < 5
        // 1 2 3 4 5 6 7 ... 99 100 pageNum = 5
        // 1 2 ... 4 5 6 7 8 ... 99 100 pageNum >5 && pageNum<总页数-4
        // 1 2 ... 96 97 98 99 100 pageNum>=总页数-4
        let pageNum = this.options.pageInfo.pageNum  //   1/2
        this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
        let totalPage = this.options.pageInfo.totalPage
        // console.log(totalPage);

        // 禁用
        let pObjs = this.el.querySelectorAll('p')
        if (this.options.pageInfo.pageNum == 1) {
            pObjs[0].style.cursor = 'not-allowed'
            pObjs[1].style.cursor = 'not-allowed'
        }
        if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) {
            pObjs[3].style.cursor = 'not-allowed'
            pObjs[4].style.cursor = 'not-allowed'
        }
        if (totalPage < 7) {
            for (let i = 1;i <= totalPage;i++) {
                // 调用创建标签方法 创建p标签
                this.createP('p',i,numObj)
            }
        } else if (pageNum < 5) {
            for (let i = 1;i < 6;i++) {
                // 调用创建标签方法 创建p标签
                this.createP('p',i,numObj)
            }
            this.createP('p','···',numObj)
            this.createP('p',totalPage-1,numObj)
            this.createP('p',totalPage,numObj)
        } else if (pageNum == 5) {
            for (let i = 1;i < 8;i++) {
                // 调用创建标签方法 创建p标签
                this.createP('p',i,numObj)
            }
            this.createP('p','···',numObj)
            this.createP('p',totalPage-1,numObj)
            this.createP('p',totalPage,numObj)
        } else if (pageNum > 5 && pageNum < totalPage - 4) {
            for (let i = 1;i < 3;i++) {
                // 调用创建标签方法 创建p标签
                this.createP('p',i,numObj)
            }
            this.createP('p','···',numObj)
            this.createP('p',pageNum - 2,numObj)
            this.createP('p',pageNum - 1,numObj)
            this.createP('p',pageNum,numObj)
            this.createP('p',pageNum + 1,numObj)
            this.createP('p',pageNum + 2,numObj)
            this.createP('p','···',numObj)
            this.createP('p',totalPage-1,numObj)
            this.createP('p',totalPage,numObj)
        } else if (pageNum >= totalPage - 4) {
            for (let i = 1;i < 3;i++) {
                // 调用创建标签方法 创建p标签
                this.createP('p',i,numObj)
            }
            this.createP('p','···',numObj)
            for (let i = totalPage - 4;i <= totalPage;i++) {
                // 调用创建标签方法 创建p标签
                this.createP('p',i,numObj)
            }
        }
        
    }

    // 创建标签
    createP (tagName,content,fatherObj) {   //tagName：创建标签名，content：标签里面的内容，fatherObj：要追加到的父标签
        let pObj = document.createElement(tagName)
            pObj.innerText = content
            pObj.style.border = '1px solid black'
            pObj.style.margin = '0 5px'
            pObj.style.padding = '0 5px'
            pObj.style.display = 'inline-block'
            // 默认选中
            // content等于pageNum 也就是等于当前页码的时候 就选中
            if (content == this.options.pageInfo.pageNum) {
            pObj.style.background = 'gray'
            }
            fatherObj.appendChild(pObj)
    }
}

